<template>
	<refresh @refresh="onrefresh" :display="show ? 'show' : 'hide'" @pullingdown="pullingdown">
		<view class="refresh-box" :style="{ marginTop: top, marginBottom: bottom }">
			<image class="refresh-img" :src="img" mode=""></image>
		</view>
	</refresh> 
</template>

<script>
	export default {
		props:{
			show: {
				type: Boolean,
				default: false
			},
			img: {
				type: String,
				default: '/static/loading/refresh.gif'
			},
			top: {
				type: String,
				default: '10rpx'
			},
			bottom: {
				type: String,
				default: '10rpx'
			}
		},
		data() {
			return {
				
			};
		},
		methods:{
			onrefresh() {
				this.$emit('refresh');
			},
			
			pullingdown(e) {
				this.$emit('pullingdown', e);
			}
		}
	}
</script>

<style lang="scss" scoped>
.refresh-box{
	width: 750rpx;
	height: 157rpx;
	@include flex-col;
	justify-content: flex-end;
	align-items: center;
}
.refresh-img{
	width: 164rpx;
	height: 137rpx;
}
</style>
